<!--Generate by Kevin's CodeBuilder -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>开发框架WEB服务API调试</title>
    <head  th:replace="source::header"></head>

    <style>
        .k_panel_content > div.api_item{
            padding-left:24px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>

<h2  class="k_box_size" style="position: absolute;z-index: 9999999;width: 100%;height: 35px;padding:5px;box-shadow: 0 0 3px 3px #ccc;">
    模块列表:<select id="model_list"></select>
    <div style="position: absolute;top:2px;right:12px"> <button onclick="freshFn()">刷新列表</button> <button onclick="logout()">退出</button></div>
</h2>
<div id="apiList" class="k_box_size" style="height: 100%;overflow: auto; padding: 0 20px 0 20px;border-top:38px solid #fff;position: relative;z-index: 1;">

</div>
<script type="text/javascript" th:inline="javascript">

    var DESKEY;
    function freshFn(){
        window.location.href = $B.getHttpHost(ctxPath)+"api/page/index?fresh=1";
    }
    var addr;
    function logout(){
        $B.confirm({
            content: '请确认退出系统？',
            okFn: function () {
                var win = $B.message("正在退出......");
                $B.request({
                    url:$B.getHttpHost(ctxPath)+"v1/logout",
                    data:{},
                    ok:function(msg,data){
                        window.location.href = $B.getHttpHost(ctxPath) + "v1/page/login";
                    },
                    final:function(){
                        win.close();
                    }
                });
            }
        });
    }

    function treeFn(t){
        var $t = $(t);
        var  txtJson = $t.next("p").text();
        try{
            var jsonObj = eval("("+txtJson+")");
            $B.jsonViewer(jsonObj,{title:'返回结果'});
        }catch (ex){

        }
    }
    var win,urlObj = {};
    function closeWindowFn() {
        win.close();
    }
    function invoke(t){
        var tr = t.parentNode.parentNode;
        var data = tr["_data"];
        console.log(data);
        var txtDesc = tr.lastChild.previousSibling.innerText;
        var desp = data.paramsDesp;
        if(!desp){
            desp = "{}";
        }

        var returnDesp = data.returnDesp;
        if(!returnDesp){
            returnDesp = "{}";
        }
        var jdesp = {};
        var retDesp = {};
        var p1 = {};
        var td = tr.firstChild;
        var url = td.innerText;
        var params = data.params;
        var jsonObj;
        var errMsg = [];
        try{
            jsonObj = eval('('+desp+')');//将json字符串格式化为json对象
            jdesp = JSON.stringify(jsonObj, null, "\t").replace(/\n/g,"<br/>");
        }catch (e) {
            errMsg.push("参数说明的json格式不正确！");
            console.log("参数说明的json格式不正确！");
        }

        try{
            jsonObj = eval('('+returnDesp+')') ;//将json字符串格式化为json对象
            retDesp = JSON.stringify(jsonObj, null, "\t").replace(/\n/g,"<br/>");
        }catch (e) {
            errMsg.push("返回说明的json格式不正确！");
        }
        try{
            p1 = eval('('+params+')');
            p1 = JSON.stringify(p1, null, 2);
            console.log("format json ",p1);
        }catch (e) {
            errMsg.push("参数的json格式不正确！");
        }
        var convertErr = "";
        if(errMsg.length > 0){
            convertErr = "<span style='padding-left:50px;color:red;font-size: 12px;'>"+ errMsg.join(";")+"</span>";
        }
        var html = "<div style='padding-left:35px;'><div class='api_item'>接口地址: &nbsp;<input id='_url' type='text' value='"+$B.getHttpHost() + url+"' style='width:600px;'/> &nbsp;&nbsp;&nbsp;&nbsp;[&nbsp;"+txtDesc+"&nbsp;] "+convertErr+"</div>";
        html = html + "<div  class='api_item' style='padding-bottom: 5px;'><p>参数：</p><p style='text-align: center;'><textarea id='_p_input' style='margin: 0px; width:48%; height: 300px;'></textarea><span style='width:48%;float: right;text-align:left;padding-left:14px;font-size: 12px;'>参数说明：<br/>"+jdesp+"<br/>返回说明:<br/>"+retDesp+"</span></p></div>";
        html = html + "<div  class='api_item' style='text-align:left;'>上传文件说明，当选择了文件后，会触发文件上传，否则为普通Ajax请求！</div>";
        html = html + "<div  class='api_item' style='text-align:left;padding:5px 0px;'>文件参数名称:<input type='text' style='padding: 0px 0px;height:24px;line-height:26px;width:160px;' value='attachments' id='file_prs_name'/><a style='text-decoration: underline;cursor: pointer;padding-left:12px: ' id='modifyName'>修改参数名称</a></div>";
        html = html + "<div  class='api_item' id='_uploadid' style='margin-bottom:20px;'></div>";
        html = html + "<div  class='api_item'><p style='color: #666666'>当后端接口参数为【@RequestBody】声明试参数对象时候，请使用“Axois调用”方式</p></div>";
        html = html + "<div  class='api_item' style='text-align:left;padding-bottom: 5px;'><button id='_invoke_btn'>Ajax调用</button><button id='_invoke_btn1'>Axois调用</button><button onclick='closeWindowFn()'>返回</button></div>";
        html = html + "<div  class='api_item'>返回值: <a style='cursor:pointer;color:blue;' onclick='treeFn(this)'>JSON树</a><p id='_res' style='word-break:break-all;'></p></div></div>";

        win = $B.window({
            title:'接口调测',
            autoHeight:false,
            width: '90%',
            height: '95%',
            content:html
        });
        var $res = $B.DomUtils.findbyId( win.$body,"#_res");
        var $txt = $B.DomUtils.findbyId( win.$body,"#_p_input");
        $txt.innerHTML = p1;
        var $upload  = $B.DomUtils.findbyId( win.$body,"#_uploadid");

        console.log("创建uplod");
        var uploadObj = new $B.Upload($upload,{
            timeout: 18000, //超时时间 秒
            url: document.getElementById("_url").value,
            fileParamName:document.getElementById("file_prs_name").value,
            multiple: true, //是否可批量选择
            immediate: false, //选择文件后是否立即自动上传，即不用用户点击提交按钮就上传
            accept: '.*',   // 可上传的文件类型 .xml,.xls,.xlsx,.png
            onSelected: function(file,fileName){ //选择文件后的事件请返回true 以便通过验证
                console.log("onSelected",fileName);
                return true;
            },
            success: function(mesage, data, res){ //成功时候的回调
                console.log("success :"+mesage,res);
                $res.innerHTML =JSON.stringify(res);
            },
            onDelected: function(res){//删除回调,function(res){ }
                console.log("delete "+res);
            },
            setParams: function(){ //设置参数 return {}
               try{
                   if($txt.innerText !== ""){
                       var prsObj = eval("("+$txt.innerText+")");
                       return prsObj;
                   }
               }catch (e) {
                   console.log("参数异常！");
                   $B.error("参数异常！",1.5);
               }
            },
            error: function (err) { //错误回调
                console.log("error "+res);
                $res.innerHTML =JSON.stringify(res);
            }
        });


        $B.Dom.click(document.getElementById("modifyName"),()=>{
            uploadObj.clear();
            uploadObj.opts.fileParamName = document.getElementById("file_prs_name").value;
            $B.success("修改成功！",1.5);
        });



        function go(){
        	addr = document.getElementById("_url").value;
            if(uploadObj.hasFiles()){
                uploadObj.upload();
                return;
            }
            try{
                var prsObj;
                var txtValue = $txt.value.replace(/\r\n/g,"")  ;
                txtValue = txtValue.replace(/\n/g,"");
                try{
                    prsObj = JSON.parse(txtValue);
                }catch (e) {
                    prsObj = eval("("+txtValue+")");
                }
                var tip = "正在提交......";
                var submitType = "application/x-www-form-urlencoded";
                if(this.id === "_invoke_btn1"){
                    tip = "Axois" + tip;
                    submitType = "application/json";
                }else{
                    tip = "Ajax" + tip;
                }

                delete prsObj["_col_sort_fieldName"];
                $res.innerHTML = tip;
                console.log("提交参数",prsObj);
                $B.request({
                    contentType:submitType,
                    url: addr,
                    data : prsObj,
                    ok:function(msg,res){
                        $res.innerHTML =JSON.stringify(res);
                    },
                    final:function(res){
                        $res.innerHTML =JSON.stringify(res);
                    }
                });

            }catch(x){
                $B.error("参数转换失败，请确认参数json格式的正确性！");
            }
        }

        var btn2 = $B.DomUtils.findbyId( win.$body,"#_invoke_btn");
        $B.DomUtils.click(btn2,go);
        var btn9 = $B.DomUtils.findbyId( win.$body,"#_invoke_btn1");
        $B.DomUtils.click(btn9,go);

    }

    function toggleFn($t){
        var $m = $t.parentNode.parentNode.nextSibling;
        if( $B.DomUtils.hasClass($t,"fa-down-open-2")){
            $B.DomUtils.removeClass($t,"fa-down-open-2");
            $B.DomUtils.addClass($t,"fa-right-open-2");
            $B.hide($m);
        }else{
            $B.DomUtils.addClass($t,"fa-down-open-2");
            $B.DomUtils.removeClass($t,"fa-right-open-2");
            $B.show($m);
        }
    }

    $B.DomUtils.onDomLoaded(function () {
        var modelList = [];
        var apis = [(${apilist})];
        console.log("onloaded",apis);
        var controllers = [(${controllers})];
        var $apid = document.getElementById("apiList");
        var modelOpt = document.getElementById("model_list");
        $B.DomUtils.change(modelOpt,function(){
            var v = this.value;
            if(v === "all"){
                window.location.href = ctxPath + "api/list";
            }else{
                window.location.href = ctxPath + "api/list?c="+v;
            }
        });
        for(var j = 0 ,jlen = controllers.length ;j < jlen ; j++){
           $B.DomUtils.append( modelOpt,"<option value='"+controllers[j].name+"'>"+controllers[j].name+"("+controllers[j].desc+")</option>");
        }
        $B.DomUtils.append( modelOpt,"<option value=''>all</option>");
        var $sp = $B.DomUtils.after(modelOpt,"<span style='padding-left:12px;cursor: pointer;'>全部收起</span>");
        $B.DomUtils.click($sp,function(){
            var $s = this;
            var tables = $B.DomUtils.children($apid,"table");
            var $h6 = $B.DomUtils.children($apid,"h6")[0];
            var $i = $B.DomUtils.children($h6,"i")[0];
            if($s.innerText === "全部收起"){
               for(let i = 0 ;i < tables.length ;i++){
                   tables[i].style.display = "none";
               }
                $s.innerText = "全部展开";
               $B.DomUtils.addClass($i,"fa-right-open-2");
               $B.DomUtils.removeClass($i,"fa-down-open-2");

            }else{
                for(let i = 0 ;i < tables.length ;i++){
                    tables[i].style.display = "";
                }
                $s.innerText = "全部收起";
                $B.DomUtils.removeClass($i,"fa-right-open-2");
                $B.DomUtils.addClass($i,"fa-down-open-2");
            }
        });
        function toggelFn(){
           $B.toggle(this.nextSibling);
        }

        for(var i = 0 ,len = apis.length ;i < len ; ++i){
            var one = apis[i];
            var $hd = $B.DomUtils.createEl("<h6 style='cursor:pointer;border-top: 1px dashed #ccc;'>模块："+one.controller+" <span style='font-size:13px;font-weight: normal;'>["+one.description+"]</span><span style='padding-left:12px'><i style='cursor: pointer' onclick='toggleFn(this)' class='fa fa-down-open-2'></i></span></h6>");
            $B.DomUtils.append($apid,$hd);
            $B.DomUtils.dblclick($hd,toggelFn);

            var actions = one.actions;
            var tab = $B.DomUtils.createEl("<table style='width:100%;border:1px solid #c6c6c6;' class='form_table'/>");
            $B.DomUtils.append($apid,tab);

            var $r = $B.DomUtils.createEl("<tr style='background:#7CA5F5;'><td style='color:#fff;font-weight:bold;'>地址</td><td style='color:#fff;font-weight:bold;'>参数</td><td style='color:#fff;font-weight:bold;'>描述</td><td style='color:#fff;font-weight:bold;width:60px;'></td></tr>");
            $B.DomUtils.append(tab,$r);

            for(var j = 0 ,jlen = actions.length ; j < jlen ; ++j){
                var a = actions[j];
                var $tr = $B.DomUtils.createEl("<tr style=''><td style='width:400px;border-bottom:1px dashed #E5E5E5;word-break:break-all;'>"+a.url+"</td><td style='text-align:left;border-bottom:1px dashed #E5E5E5;word-break:break-all;'>"+a.params+"</td><td style='border-bottom:1px dashed #E5E5E5;word-break:break-all;'>"+a.descript+"</td><td style='border-bottom:1px dashed #E5E5E5;width:60px;text-align:right;word-break:break-all;'><a style='cursor:pointer;' onclick='invoke(this)'>调用</a></td></tr>");
                $B.DomUtils.append(tab,$tr);
                if(a.params === "{}"){
                    $tr["descp"] = "{}";
                }else{
                    $tr["descp"] = a.paramsDesp;
                }
                $tr["returnDesp"] = a.returnDesp;

                $tr["_data"] = a;
            }
        }
        setInterval(function(){
            $B.request({
                url: $B.getHttpHost() + "api/testSession",
                data : {},
                ok:function(msg,res){
                },
                fail:function(){

                },
                final:function(res){
                }
            });
        },2000 * 60);
    });

</script>
</body>
</html>